<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - relative points example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>

    <script src="../crayon.min.js"></script>
    <script>

      var canvas = new crayon.Canvas({ id: "my-canvas" });

      var crossH = new crayon.CustomShape({
        fill: false,
        stroke: 2,
        strokeColor: '#000',
        z: 3,
        alpha: 0.3
      });
      crossH.moveTo(190, 200);
      crossH.lineTo(210, 200);

      var crossV = new crayon.CustomShape({
        fill: false,
        stroke: 2,
        strokeColor: '#000',
        z: 3,
        alpha: 0.3
      });
      crossH.moveTo(200, 190);
      crossH.lineTo(200, 210);

      canvas.add(crossH);
      canvas.add(crossV);

      var sunPoint = new crayon.Point(200, 200);
      var sun = new crayon.Circle({
        position: sunPoint,
        color: '#fff',
        stroke: 2,
        strokeColor: '#f00',
        radius: 20,
        z: 2
      });
      var sunOrbit = new crayon.Circle({
        position: sunPoint,
        fill: false,
        stroke: 1,
        strokeColor: '#000',
        radius: 130,
        z: 1,
        alpha: 0.3
      });

      canvas.add(sun);
      canvas.add(sunOrbit);

      var planetPoint = new crayon.RelativePoint(130, 0, sunPoint);
      var planet = new crayon.Circle({
        position: planetPoint,
        color: '#fff',
        stroke: 2,
        strokeColor: '#f00',
        radius: 10,
        z: 2
      });
      var planetOrbit = new crayon.Circle({
        position: planetPoint,
        fill: false,
        stroke: 1,
        strokeColor: '#000',
        radius: 30,
        z: 1,
        alpha: 0.3
      });

      canvas.add(planet);
      canvas.add(planetOrbit);

      var moonPoint = new crayon.RelativePoint(30, 0, planetPoint);
      var moon = new crayon.Circle({
        position: moonPoint,
        color: '#fff',
        stroke: 2,
        strokeColor: '#f00',
        radius: 2,
        z: 2
      });

      canvas.add(moon);

      var sunGravity = new crayon.CustomShape({
        fill: false,
        stroke: 1,
        strokeColor: '#000'
      })
      sunGravity.moveTo(sunPoint);
      sunGravity.lineTo(planetPoint);

      canvas.add(sunGravity);

      var planetGravity = new crayon.CustomShape({
        fill: false,
        stroke: 1,
        strokeColor: '#000'
      })
      planetGravity.moveTo(planetPoint);
      planetGravity.lineTo(moonPoint);

      canvas.add(planetGravity);

      // the magic happens here!
      crayon.timer.on('frame', function(time) {
        var sunAngle = time / 500;
        var planetAngle = time / 1500;
        var moonAngle = time / -300;

        sunPoint.move(
          200 + 20 * Math.cos(sunAngle),
          200 + 20 * Math.sin(sunAngle)
        );

        planetPoint.move(
          130 * Math.cos(planetAngle),
          130 * Math.sin(planetAngle)
        );

        moonPoint.move(
          30 * Math.cos(moonAngle),
          30 * Math.sin(moonAngle)
        );
      });

    </script>
  </body>
</html>